<!-- 发现音乐 -->
<template>
    <div>
        <!-- 导航栏 -->
        <nav class="mb-5 flex justify-center">
            <ul class="w-[35rem] flex rounded-full bg-[var(--inputBg)] justify-between">
                <li class="active conNav" @click="getNavEl">
                    个性推荐</li>
                <li class="conNav" @click="getNavEl">
                    专属定制</li>
                <li class="conNav" @click="getNavEl">
                    歌单</li>
                <li class="conNav" @click="getNavEl">
                    排行榜</li>
                <li class="conNav" @click="getNavEl">
                    歌手</li>
                <li class="conNav" @click="getNavEl">
                    最新音乐</li>
            </ul>
        </nav>
        <!-- 轮播图 -->
        <Banner></Banner>
        <h1 class="text-3xl font-bold text-[var(--text)] mb-5">{{ setTime() }}</h1>
        <!-- 每日歌曲推荐 -->
        <div class="w-auto h-32 bg-[var(--inputBg)] rounded-lg flex overflow-hidden">
            <div class="pr-1 relative">
                <img class="h-32 blur-sm" src="@renderer/assets/image/music.jpg">
                <i
                    class="iconfont icon-rili text-[var(--contentBg)] before:text-[80px] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"></i>
                <span
                    class="text-[var(--contentBg)] text-2xl absolute top-[60%] left-[50%] translate-x-[-50%] translate-y-[-50%]">{{
                        new Date().getDate() }}</span>
            </div>
            <div @click="goToEdrMusic"
                class="flex items-center w-full rounded-r px-4 relative hover:bg-[var(--active)] duration-500 hover:cursor-pointer group/item">
                <span class="text-[var(--text)] font-bold tracking-[3px]">每日歌曲推荐</span>
                <i
                    class="iconfont icon-bofang absolute right-4 before:text-3xl text-[var(--playBg)] invisible group-hover/item:visible hover:scale-150 transition-all"></i>
            </div>
        </div>
        <!-- 推荐歌单 -->
        <h1 id="recom" class="cardTitle">推荐歌单</h1>
        <ul class="grid grid-cols-5 gap-3">
            <el-skeleton v-for="_ in 10" :loading="recomLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 195.7px; height: 180px" />
                    <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 50%" />
                        <div style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            ">
                            <el-skeleton-item variant="text" style="margin-right: 16px" />
                            <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                    </div>
                </template>
            </el-skeleton>
            <li v-for="item in recomSingList" :key="item.id" @click="goToSongListDetail(item.id)"
                class="p-4 rounded-lg flex flex-col justify-evenly items-center group/item hover:bg-[var(--active)] bg-[var(--inputBg)] hover:cursor-pointer duration-300 h-72">
                <div class="rounded-lg mb-2 relative">
                    <img loading="lazy" class="rounded-lg object-cover w-52 h-48" :src="item.picUrl">
                    <i
                        class="iconfont icon-bofang invisible group-hover/item:visible text-[var(--playBg)] before:text-[40px] absolute right-3 top-[60%] font-bold hover:scale-125 transition-all"></i>
                </div>
                <p class="text-[var(--text)] w-full h-[50px] line-clamp-2 text-ellipsis">{{ item.name }}</p>
            </li>
        </ul>
        <!-- 热门博客 -->
        <h1 id="new" class="cardTitle">热门博客</h1>
        <ul class="grid grid-cols-2 gap-3">
            <el-skeleton style="display: flex;height: 96px" v-for="_ in 6" :loading="newLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 96px; height: 96px" />
                    <div
                        style="padding: 14px;width: 80%;display: flex; flex-direction: column;justify-content: space-between;">
                        <el-skeleton-item variant="h3" style="width: 40%" />
                        <div style="height: 16px; ">
                            <el-skeleton-item variant="text" style="width: 20%;" />
                        </div>
                        <div style="height: 16px; ">
                            <el-skeleton-item variant="text" style="width: 80%;" />
                        </div>
                    </div>
                </template>
            </el-skeleton>
            <li v-for="item in podcList" :key="item.id"
                class="hover:bg-[var(--hoverBg)] duration-300 h-24 flex rounded-md relative">
                <div class="hover:cursor-pointer relative">
                    <img :src="item.picUrl" class="rounded-md" width="96px">
                    <div @click="playBackMusic(item)"
                        class="absolute top-14 left-[58px] w-7 h-7 bg-gray-100 rounded-full flex justify-center items-center">
                        <i class="iconfont icon-24gf-play text-[var(--playBg)] ml-[2px]"></i>
                    </div>
                </div>
                <div class="w-60 ml-3 py-2 flex flex-col justify-between">
                    <p class="text-[var(--text)] font-medium">{{ item.name }}</p>
                    <p
                        class="border rounded-md w-fit px-1 border-[var(--iconBg)] text-xs text-center text-[var(--iconBg)] mr-1">
                        歌曲翻唱</p>
                    <div class="flex items-center justify-between">
                        <p
                            class="text-[var(--iconBg)] hover:cursor-pointer hover:text-[--text] text-xs w-24 text-ellipsis line-clamp-1 h-4">
                            {{ item.song?.transName ? item.song.transName : item.song?.name }}</p>
                        <div class="min-w-16">
                            <span class="text-xs text-[var(--iconBg)] iconfont icon-24gf-play before:text-xs"></span>
                            <span class="text-xs text-[var(--iconBg)] pt-[1px] pl-[3px]">{{ item.song?.duration
                                }}</span>
                        </div>
                        <div>
                            <span class="text-xs text-[var(--iconBg)] iconfont icon-shizhong before:text-xs"></span>
                            <span class="text-xs text-[var(--iconBg)] pt-[1px] pl-[3px]">
                                {{ setDuration(item.song?.duration as number) }}
                            </span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 听见好书 -->
        <div class="my-5 flex justify-between">
            <h1 class="text-2xl text-[var(--text)]"><span class="iconfont icon-fanhui font-bold mr-1"></span>听见好书-新用户免费听
            </h1>
            <div
                class="w-24 rounded-full border border-[var(--iconBg)] flex justify-center items-center cursor-pointer">
                <span class="text-[var(--text)] text-xs">全部分类</span>
                <span class="text-xs text-[var(--iconBg)] text-[10px] ml-1">&#9660</span>
            </div>
        </div>
        <ul class="grid grid-cols-5 gap-3">
            <el-skeleton v-for="_ in 5" :loading="recomLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 195.7px; height: 180px" />
                    <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 50%" />
                        <div style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            ">
                            <el-skeleton-item variant="text" style="margin-right: 16px" />
                            <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                    </div>
                </template>
            </el-skeleton>
            <li v-for="item in bookList" :key="item.id" @click="goToSongListDetail(item.id)"
                class="p-4 pb-6 rounded-lg flex flex-col justify-between items-center group/item hover:bg-[var(--active)] relative bg-[var(--inputBg)] hover:cursor-pointer transition-all  ">
                <div class="mb-2 relative group/item overflow-hidden">
                    <div
                        class="bg-gray-800 w-full text-[var(--contentBg)] px-2 py-1 opacity-80 rounded-t-lg absolute line-clamp-2 text-ellipsis h-12 text-sm translate-y-[-100%] group-hover/item:translate-y-0 duration-500">
                        {{ item.name }}</div>
                    <img class="rounded-lg object-cover w-44 h-44" :src="item.picUrl">
                    <i
                        class="iconfont icon-bofang invisible group-hover/item:visible text-[var(--playBg)] before:text-[40px] absolute left-[68%] top-[55%] font-bold hover:scale-125 transition-all"></i>
                </div>

                <p class="text-[var(--text)] text-xl w-full h-[60px] line-clamp-2 text-ellipsis"><span
                        class="text-xs bg-[var(--inputBg)] p-[2px] rounded-sm mr-1">新人免费听</span>{{ item.name }}</p>
            </li>
        </ul>
        <!-- 独家放送 -->
        <h1 id="only" class="cardTitle">独家放送</h1>
        <ul class="grid grid-cols-3 gap-3">
            <el-skeleton v-for="_ in 3" :loading="onlyLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 334.18px; height: 187.96px" />
                    <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 50%" />
                        <div style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            ">
                            <el-skeleton-item variant="text" style="margin-right: 16px" />
                            <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                    </div>
                </template>
            </el-skeleton>
            <li @click="goToMvDetail(item.id)" v-for="item in onlyHomeSetList" :key="item.id"
                class="rounded-lg relative hover:cursor-pointer">
                <div class="rounded-lg mb-2 relative">
                    <img loading="lazy" class="w-full rounded-lg min-w-[328.8px]" :src="item.sPicUrl">
                    <i
                        class="iconfont icon-bofang text-gray-200 opacity-50 before:text-[40px] absolute left-4 top-2 font-bold"></i>
                </div>
                <p class="text-[var(--text)] text-xl w-full h-[60px] line-clamp-2 text-ellipsis">{{
                    item.name }}</p>
            </li>
        </ul>
        <!-- 最新音乐 -->
        <h1 class="cardTitle">最新音乐</h1>
        <ul class="grid grid-cols-3 gap-3">
            <el-skeleton style="display: flex;height: 56px" v-for="_ in 12" :loading="newLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 56px; height: 56px" />
                    <div style="padding: 14px;width: 100%;">
                        <el-skeleton-item variant="h3" style="width: 70%" />
                        <div style="height: 16px; ">
                            <el-skeleton-item variant="text" style="width: 30%;" />
                        </div>
                    </div>
                </template>
            </el-skeleton>
            <li v-for="item in newMusicList" :key="item.id"
                class="hover:bg-[var(--hoverBg)] duration-300 h-14 flex rounded-md relative">
                <div class="hover:cursor-pointer relative w-14 h-14">
                    <img :src="item.picUrl" class="rounded-md min-w-14">
                    <div class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-7 h-7 bg-[var(--contentBg)] rounded-full flex justify-center items-center"
                        @click="playBackMusic(item)">
                        <i class="iconfont icon-24gf-play text-[var(--playBg)] ml-[2px]"></i>
                    </div>
                </div>
                <div class="ml-3 flex flex-col justify-center">
                    <p class="text-[var(--text)] text-sm mb-2">{{ item.name }}</p>
                    <div class="flex select-none">
                        <p v-if="item.song?.privilege?.dlLevel !== 'none'"
                            class="border w-fit rounded-md px-1 border-[var(--playBg)]  text-xs text-center text-[var(--playBg)] mr-1">
                            Hi-Res
                        </p>
                        <p v-if="item.song?.mvid" @click="goToMvDetail(item.song.mvid)"
                            class="border cursor-pointer w-fit rounded-md px-1 border-[var(--playBg)]  text-xs text-center text-[var(--playBg)] mr-1">
                            MV
                        </p>
                        <p @click="gotoSingerIngo(i.id)" v-for="(i, index) in item.song?.artists"
                            class="text-[var(--iconBg)] hover:cursor-pointer hover:text-[var(--text)] text-xs w-fit line-clamp-1 h-4">
                            {{ i.name }}<span v-if="index !== item.song?.artists.length as number - 1"> /&nbsp;</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 主题播客 -->
        <h1 id="dj" class="cardTitle">主题播客</h1>
        <ul class="grid grid-cols-5 gap-3">
            <el-skeleton v-for="_ in 5" :loading="djLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 176px; height: 176px" />
                </template>
            </el-skeleton>
            <li v-for="item in recomProgramList"
                class="rounded-lg relative hover:cursor-pointer w-[calc(100%/6] mr-3 last:mr-0">
                <div class="rounded-lg mb-2 relative">
                    <img class="rounded-lg object-cover h-52" :src="item.coverUrl">
                    <p
                        class="bg-[rgba(0,0,0,0.5)] rounded-b-lg text-[var(--icon)] absolute bottom-0 text-lg w-full pl-2 h-[30px] line-clamp-1 text-ellipsis">
                        {{ item.radio.name }}</p>
                </div>
            </li>
        </ul>
        <!-- 推荐MV -->
        <h1 id="mv" class="cardTitle">推荐MV</h1>
        <ul class="grid grid-cols-3 gap-3">
            <el-skeleton v-for="_ in 3" :loading="recomMvLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 334.18px; height: 187.96px" />
                    <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 50%" />
                        <div style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            ">
                            <el-skeleton-item variant="text" style="margin-right: 16px" />
                            <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                    </div>
                </template>
            </el-skeleton>
            <li @click="goToMvDetail(item.id)" v-for="item in recomMvList" :key="item.id" class="rounded-lg relative">
                <div class="rounded-lg mb-2 group/item relative flex overflow-hidden hover:cursor-pointer">
                    <img loading="lazy" class="w-full rounded-lg" :src="item.picUrl">
                    <div class="absolute top-2 right-2 opacity-100 group-hover/item:opacity-0 duration-150">
                        <i class="iconfont icon-24gf-play text-gray-200 before:text-sm font-bold hover:scale-125"></i>
                        <span class="ml-1 text-slate-300 text-sm">{{ setVNumber(item.playCount) }}</span>
                    </div>
                    <div
                        class="bg-gray-800 text-gray-50 px-2 py-1 opacity-80 rounded-t-lg absolute line-clamp-2 text-ellipsis w-full h-12 text-sm translate-y-[-100%] group-hover/item:translate-y-0 duration-500">
                        {{ item.copywriter }}</div>
                </div>
                <p class="text-[var(--text)] hover:cursor-pointer w-full line-clamp-1 text-ellipsis">{{
                    item.name }}
                </p>
                <p class="text-[var(--iconBg)] w-full hover:cursor-pointer line-clamp-1 text-ellipsis">{{
                    item.copywriter }}
                </p>
            </li>
        </ul>
        <!-- 看看 -->
        <h1 class="cardTitle">看看</h1>
        <ul class="grid grid-cols-5 gap-3">
            <li v-for="item in lookList" :key="item.id"
                class="p-4 rounded-lg flex flex-col justify-evenly items-center group/item hover:bg-[var(--active)] bg-[var(--inputBg)] hover:cursor-pointer duration-300 h-72 ">
                <div class="rounded-lg mb-2 relative w-full overflow-hidden group/img flex flex-col">
                    <img class="w-full rounded-lg group-hover/img:scale-110 duration-500" :src="item.coverUrl">
                    <i
                        class="iconfont icon-bofang invisible group-hover/item:visible text-[var(--playBg)] before:text-[40px] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] font-bold hover:scale-125 transition-all"></i>
                    <div class="bg-[rgba(0,0,0,0.5)] flex w-full items-center pl-2 absolute bottom-0 py-1">
                        <div class="w-8 h-8 overflow-hidden rounded-full">
                            <img :src="item.dj.avatarUrl" class="rounded-full w-full" alt="">
                        </div>
                        <p class="ml-1 pl-1 text-[var(--icon)] text-sm w-24 line-clamp-1 text-ellipsis">
                            {{ item.dj.nickname }}
                        </p>
                    </div>
                </div>
                <p class="text-[var(--text)] w-full h-[50px] line-clamp-2 text-ellipsis">
                    {{ item.name }}
                </p>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, getCurrentInstance, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { setVNumber, setTime, setDuration } from '@renderer/hooks'
import { useStore } from '@renderer/store'
import { storeToRefs } from 'pinia'
import type { NewMusicList } from '@renderer/store/modules/newMusic/type'
import type { songInfo } from '@renderer/store/modules/eveylSong/type'
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const router = useRouter()
// 仓库
const { recSingList, onlyHomeSet, newMusic, recomMv, recomProgram } = useStore()
const { recomSingList, bookList } = storeToRefs(recSingList)
const { onlyHomeSetList } = storeToRefs(onlyHomeSet)
const { newMusicList, podcList } = storeToRefs(newMusic)
const { recomMvList } = storeToRefs(recomMv)
const { recomProgramList, lookList } = storeToRefs(recomProgram)
const recomLoad = ref(true)
const recomMvLoad = ref(true)
const onlyLoad = ref(true)
const newLoad = ref(true)
const djLoad = ref(true)
onMounted(() => {
    const recomSongListObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                getRecomSongList();
            }
        });
    });
    const onlyListObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                getOnlyList();
            }
        });
    });
    const newSongListObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                getNewList();
            }
        });
    });
    const recomMvListObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                getMvList();
            }
        });
    });
    const recomDjListObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                getRecomDj()
            }
        });
    });
    recomSongListObserver.observe(document.getElementById('recom') as HTMLElement);
    onlyListObserver.observe(document.getElementById('only') as HTMLElement);
    newSongListObserver.observe(document.getElementById('new') as HTMLElement);
    recomMvListObserver.observe(document.getElementById('mv') as HTMLElement);
    recomDjListObserver.observe(document.getElementById('dj') as HTMLElement);
})
watchEffect(() => {
    if (recomSingList.value.length !== 0) {
        recomLoad.value = false
    }
    if (onlyHomeSetList.value.length !== 0) {
        onlyLoad.value = false
    }
    if (newMusicList.value.length !== 0) {
        newLoad.value = false
    }
    if (recomMvList.value.length !== 0) {
        recomMvLoad.value = false
    }
    if (recomProgramList.value.length !== 0) {
        djLoad.value = false
    }
})
// 防抖函数
function debounce(fn: Function, delay: number) {
    let timer = null;
    return function () {
        //  @ts-ignore
        clearTimeout(timer);
        // @ts-ignore
        timer = setTimeout(() => fn.apply(this, arguments), delay);
    };
}
// 获取推荐歌单数据
const getRecomSongList = debounce(async () => {
    if (recomSingList.value.length == 0) {
        await recSingList.getRecomSingList()
    }
}, 500)
// 获取独家放送数据
const getOnlyList = debounce(async () => {
    if (onlyHomeSetList.value.length == 0) {
        await onlyHomeSet.getOnlyHomeSet()
    }
}, 500)
// 获取最新音乐
const getNewList = debounce(async () => {
    if (newMusicList.value.length == 0) {
        await newMusic.getNewMusic()
    }
}, 500)
// 获取推荐MV
const getMvList = debounce(async () => {
    if (recomMvList.value.length == 0) {
        await recomMv.getRecomMvList()
    }
}, 500)
// 获取推荐电台
const getRecomDj = debounce(async () => {
    if (recomProgramList.value.length == 0) {
        await recomProgram.getRecomProgramList()
    }
}, 500)
// 跳转每日歌曲推荐路由
const goToEdrMusic = () => {
    router.push('/everyMusic')
}
// 跳转推荐歌单详情页
const goToSongListDetail = (id: number | string) => {
    router.push({ path: '/songListDetail', query: { id: id } })
}
// 跳转MV详情页
const goToMvDetail = (id: number | string) => {
    let scrollValue = document.querySelector('#main')?.scrollTop
    router.push({ name: 'mv', query: { id, scrollValue } })
}
// 跳转歌手详情页
const gotoSingerIngo = (id: number) => {
    let scrollValue = document.querySelector('#main')?.scrollTop
    router.push({ path: '/singerInfo', query: { id, scrollValue } })
}
// 最新音乐播放
const playBackMusic = (item: NewMusicList) => {
    let playList = JSON.parse(localStorage.getItem('playList') as string) || []
    let newMusicObj = {
        id: item.id,
        al: {
            name: item.song?.alias[0] || '暂无专辑',
            picUrl: item.picUrl
        },
        name: item.name,
        ar: [
            {
                id: item.song?.artists[0].id,
                name: item.song?.artists[0].name
            }
        ],
        privilege: item.song?.privilege,
        dt: item.song?.duration
    }
    if (playList.findIndex((i: songInfo) => i.id == item.id) == -1) {
        playList.unshift(newMusicObj);
        localStorage.setItem('playList', JSON.stringify(playList));
    }
    bus.emit('MusicInfo', newMusicObj)
    bus.emit('openDesktopLyric')
}
// 切换导航
function getNavEl(e: Event) {
    let list = document.getElementsByClassName('conNav')
    for (let i = 0; i < list.length; i++) {
        list[i].classList.remove('active')
    }
    (e.target as HTMLElement).classList.add('active')
}
</script>

<style scoped lang='less'></style>